<!-- Simple Portfolio Page -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Portfolio</title>
</head>
<body>
<header>
<h1>Welcome to My Portfolio</h1>
<nav>
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>Hello, I'm a web developer passionate about building creative websites!</p>
</section>
<section id="projects">
<h2>Projects</h2>
<p>Here's a list of my past projects.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>You can reach me at: myemail@example.com</p>
</section>
</body>
</html>
<!-- Simple Blog Page -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Blog</title>
</head>
<body>
<header>
<h1>Welcome to My Blog</h1>
<nav>
<ul>
<li><a href="#latest">Latest Posts</a></li>
<li><a href="#about">About Me</a></li>
</ul>
</nav>
</header>
<section id="latest">
<h2>Latest Posts</h2>
<article>
<h3>How I Built My First Website</h3>
<p>This is the story of how I built my very first website using HTML!</p>
</article>
<article>
<h3>Why Web Development is Awesome</h3>
<p>In this post, I’ll tell you why web development is the best career choice.</p>
</article>
</section>
<section id="about">
<h2>About Me</h2>
<p>I am a web developer who loves to share my journey through blogs.</p>
</section>
</body>
</html>
<!-- HTML Form Page -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us</title>
</head>
<body>
<h1>Contact Us</h1>
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<br />
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
<!-- HTML Image Gallery -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Gallery</title>
</head>
<body>
<h1>My Image Gallery</h1>
<div>
<img src="image1.jpg" alt="Image 1" width="300" />
<img src="image2.jpg" alt="Image 2" width="300" />
<img src="image3.jpg" alt="Image 3" width="300" />
</div>
</body>
</html>
<!-- HTML Table Page -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Schedule</title>
</head>
<body>
<h1>My Weekly Schedule</h1>
<table border="1">
<thead>
<tr>
<th>Day</th>
<th>Task</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>Study HTML</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Build a portfolio</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Learn JavaScript</td>
</tr>
</tbody>
</table>
</body>
</html>
<!-- HTML Responsive Page -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Design</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
@media screen and (max-width: 600px) {
.container {
flex-direction: column;
}
}
</style>
</head>
<body>
<h1>Responsive Web Design</h1>
<div class="container">
<div>Left Side</div>
<div>Right Side</div>
</div>
</body>
</html>
<!-- HTML Blog Post Page -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Blog Post</title>
</head>
<body>
<h1>My First Blog Post</h1>
<p>This is my first post on my new blog! Exciting times ahead!</p>
</body>
</html>
<!-- HTML Resume Page -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Resume</title>
</head>
<body>
<h1>My Resume</h1>
<h2>Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h2>Experience</h2>
<p>I have worked as a web developer for over 2 years, building websites and web applications.</p>
</body>
</html>
<!-- HTML Shopping Cart Page -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shopping Cart</title>
</head>
<body>
<h1>Shopping Cart</h1>
<table>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>$10</td>
</tr>
<tr>
<td>Item 2</td>
<td>$20</td>
</tr>
</tbody>
</table>
<button>Checkout</button>
</body>
</html>
<!-- HTML FAQ Page -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FAQ Page</title>
</head>
<body>
<h1>Frequently Asked Questions</h1>
<div>
<h3>What is HTML?</h3>
<p>HTML stands for HyperText Markup Language. It is the standard language for creating web pages.</p>
<h3>How do I create a webpage?</h3>
<p>You create a webpage by writing HTML code in a text editor, and then opening it in a web browser.</p>
</div>
</body>
</html>
<!-- HTML Portfolio with Sections -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Portfolio</title>
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>I'm a web developer with a passion for coding!</p>
</section>
<section id="skills">
<h2>Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Email me at: myemail@example.com</p>
</section>
</body>
</html>
<!-- HTML Contact Form with Validation -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us</title>
</head>
<body>
<h1>Contact Us</h1>
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<br />
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
<!-- HTML Navigation Menu -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navigation Menu</title>
<style>
ul {
list-style-type: none;
}
li {
display: inline;
margin-right: 10px;
}
</style>
</head>
<body>
<h1>My Navigation Menu</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</body>
</html>
<!-- HTML Audio Player -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Audio Player</title>
</head>
<body>
<h1>HTML Audio Player</h1>
<audio controls>
<source src="audio.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio>
</body>
</html>
<!-- HTML Video Player -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Video Player</title>
</head>
<body>
<h1>HTML Video Player</h1>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</body>
</html>
<!-- HTML Unordered List Page -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Shopping List</title>
</head>
<body>
<h1>My Shopping List</h1>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
</body>
</html>
<!-- HTML Ordered List Page -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My To-Do List</title>
</head>
<body>
<h1>My To-Do List</h1>
<ol>
<li>Buy groceries</li>
<li>Finish homework</li>
<li>Walk the dog</li>
</ol>
</body>
</html>
<!-- HTML Description List -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Description List</title>
</head>
<body>
<h1>HTML Description List</h1>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, used to structure web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, used to style HTML elements.</dd>
</dl>
</body>
</html>
<!-- HTML Table with Data -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Student Grades</title>
</head>
<body>
<h1>Student Grades</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Grade</th>
</tr>
<tr>
<td>John</td>
<td>A</td>
</tr>
<tr>
<td>Jane</td>
<td>B</td>
</tr>
</table>
</body>
</html>
<!-- HTML Embed Google Map -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Location</title>
</head>
<body>
<h1>Find My Location</h1>
<iframe
width="600"
height="450"
style="border:0"
loading="lazy"
allowfullscreen
referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/embed/v1/place?q=London&key=YOUR_GOOGLE_MAPS_API_KEY"
></iframe>
</body>
</html>
<!-- CSS Box Model Example -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Box Model Example</title>
<style>
.box {
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid #000;
margin: 30px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box">This is a box with padding, border, and margin.</div>
</body>
</html>
<!-- CSS Positioning Example -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Positioning Example</title>
<style>
.relative-box {
position: relative;
top: 50px;
left: 50px;
background-color: lightgreen;
padding: 20px;
}
.absolute-box {
position: absolute;
top: 0;
left: 0;
background-color: lightcoral;
padding: 20px;
}
.fixed-box {
position: fixed;
bottom: 10px;
right: 10px;
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="relative-box">This is a relative box</div>
<div class="absolute-box">This is an absolute box</div>
<div class="fixed-box">This is a fixed box</div>
</body>
</html>
<!-- Flexbox Navigation Bar -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbox Navigation</title>
<style>
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 10px;
}
nav a {
color: white;
text-decoration: none;
padding: 10px;
}
nav a:hover {
background-color: #575757;
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</body>
</html>
<!-- CSS Grid Portfolio Layout -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio</title>
<style>
.portfolio {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.portfolio-item {
background-color: #f4f4f4;
padding: 20px;
text-align: center;
border-radius: 8px;
}
.portfolio-item img {
width: 100%;
height: auto;
border-radius: 8px;
}
@media (max-width: 768px) {
.portfolio {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.portfolio {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="portfolio">
<div class="portfolio-item">
<img src="project1.jpg" alt="Project 1" />
<h3>Project 1</h3>
</div>
<div class="portfolio-item">
<img src="project2.jpg" alt="Project 2" />
<h3>Project 2</h3>
</div>
<div class="portfolio-item">
<img src="project3.jpg" alt="Project 3" />
<h3>Project 3</h3>
</div>
</div>
</body>
</html>
<!-- Responsive Layout Example -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Layout</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
.item {
background-color: #ddd;
padding: 20px;
margin: 10px;
width: 30%;
}
@media (max-width: 768px) {
.item {
width: 45%;
}
}
@media (max-width: 480px) {
.item {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
<!-- Advanced CSS Selectors -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Advanced Selectors</title>
<style>
/* Style only the first child of a div */
div > p:first-child {
color: green;
}
/* Style even list items */
ul li:nth-child(even) {
background-color: #f0f0f0;
}
/* Select elements with a specific attribute */
input[type="text"] {
border: 2px solid blue;
}
/* Style the last child of a container */
div > p:last-child {
color: red;
}
/* Style the element that is being hovered */
a:hover {
color: orange;
text-decoration: underline;
}
/* Style elements that are checked (radio, checkbox) */
input:checked {
background-color: lightgreen;
}
</style>
</head>
<body>
<div>
<p>This is the first paragraph inside a div.</p>
<p>This is the last paragraph inside a div.</p>
</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<form>
<input type="text" placeholder="Enter your name" />
<input type="checkbox" /> Accept Terms
</form>
</body>
</html>
<!-- CSS Transitions and Animations -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Transitions and Animations</title>
<style>
/* Transition example */
.transition-box {
width: 200px;
height: 200px;
background-color: #3498db;
transition: background-color 0.5s ease, transform 0.5s ease;
}
.transition-box:hover {
background-color: #2ecc71;
transform: scale(1.2);
}
/* Keyframe animation example */
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: #e74c3c;
animation: bounce 1s infinite;
}
</style>
</head>
<body>
<div class="transition-box"></div>
<div class="animated-box"></div>
</body>
</html>
<!-- CSS Variables -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Variables</title>
<style>
/* Define custom properties */
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
--padding: 10px;
}
body {
font-size: var(--font-size);
background-color: var(--primary-color);
color: white;
padding: var(--padding);
}
button {
background-color: var(--secondary-color);
border: none;
color: white;
padding: var(--padding);
cursor: pointer;
}
button:hover {
background-color: darkgreen;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<button>Click Me!</button>
</body>
</html>
<!-- CSS Functions -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Functions</title>
<style>
/* Using calc() for flexible layout */
.container {
width: calc(100% - 50px);
padding: 25px;
background-color: #f4f4f4;
}
/* Using rgb() and rgba() for color */
.color-box {
width: 100px;
height: 100px;
background-color: rgb(255, 99, 71);
margin: 10px;
}
.transparent-box {
width: 100px;
height: 100px;
background-color: rgba(255, 99, 71, 0.5);
margin: 10px;
}
/* Using min() and max() */
.responsive-box {
width: min(300px, 50%);
height: 200px;
background-color: #3498db;
}
</style>
</head>
<body>
<div class="container">
<div class="color-box"></div>
<div class="transparent-box"></div>
<div class="responsive-box"></div>
</div>
</body>
</html>
<!-- CSS Filters -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Filters</title>
<style>
/* Apply grayscale, contrast, and blur effects */
img {
width: 300px;
transition: filter 0.5s ease;
}
img:hover {
filter: grayscale(100%) contrast(150%) blur(5px);
}
</style>
</head>
<body>
<h1>CSS Filter Effects</h1>
<img src="image.jpg" alt="Image with filter effect" />
</body>
</html>
<!-- Advanced Flexbox and Grid -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbox and Grid</title>
<style>
/* Flexbox layout */
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 200px;
background-color: #3498db;
}
.flex-item {
width: 100px;
height: 100px;
background-color: #f39c12;
text-align: center;
line-height: 100px;
}
/* CSS Grid layout */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #e74c3c;
padding: 20px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<h1>Advanced Flexbox and Grid</h1>
<!-- Flexbox Example -->
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
<!-- Grid Example -->
<div class="grid-container">
<div class="grid-item">Grid Item 1</div>
<div class="grid-item">Grid Item 2</div>
<div class="grid-item">Grid Item 3</div>
</div>
</body>
</html>
<!-- Custom Fonts and Typography -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom Fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@300;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
}
p {
font-size: 18px;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Heading with Open Sans</h1>
<p>This paragraph uses the Roboto font with a customized line height and size.</p>
</body>
</html>
<!-- CSS for Forms and Inputs -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Form Styling</title>
<style>
body {
font-family: Arial, sans-serif;
}
form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 8px;
}
input[type="text"], input[type="email"], input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
border-radius: 4px;
}
input[type="submit"]:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<h1>Sign Up Form</h1>
<form>
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required />
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required />
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password" required />
<input type="submit" value="Sign Up" />
</form>
</body>
</html>
<!-- Box Shadows and Text Shadows -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Box Shadows and Text Shadows</title>
<style>
/* Box Shadow for div */
.box {
width: 300px;
height: 200px;
background-color: #f39c12;
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.2);
margin: 50px;
}
/* Text Shadow for heading */
h1 {
color: #2c3e50;
text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<h1>Text with Shadow Effect</h1>
<div class="box"></div>
</body>
</html>
<!-- Backgrounds and Gradients -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Backgrounds and Gradients</title>
<style>
/* Solid Background Color */
.solid-bg {
width: 100%;
height: 300px;
background-color: #3498db;
}
/* Linear Gradient Background */
.gradient-bg {
width: 100%;
height: 300px;
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
</style>
</head>
<body>
<div class="solid-bg"></div>
<div class="gradient-bg"></div>
</body>
</html>
<!-- Overflow and Scrolling -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Overflow and Scrolling</title>
<style>
.content {
width: 300px;
height: 200px;
overflow: auto; /* Adds scrollbars when content overflows */
border: 2px solid #34495e;
padding: 20px;
}
</style>
</head>
<body>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut turpis felis.</p>
<p>Maecenas sed augue id libero hendrerit sollicitudin.</p>
<p>Fusce id metus ut justo tristique lacinia at eget tortor.</p>
<p>Curabitur sit amet convallis urna. Nulla et urna vitae ipsum porttitor gravida.</p>
</div>
</body>
</html>
<!-- Positioning and Layering with z-index -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Positioning and z-index</title>
<style>
.box1, .box2, .box3 {
position: absolute;
width: 200px;
height: 200px;
}
.box1 {
background-color: #ff6347;
top: 50px;
left: 50px;
z-index: 1;
}
.box2 {
background-color: #2ecc71;
top: 100px;
left: 100px;
z-index: 2;
}
.box3 {
background-color: #3498db;
top: 150px;
left: 150px;
z-index: 3;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
<!-- Pseudo-classes and Pseudo-elements -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pseudo-classes and Pseudo-elements</title>
<style>
/* Pseudo-class */
a:hover {
color: #e74c3c;
}
/* Pseudo-element */
h1::after {
content: " - Welcome to my website!";
font-size: 16px;
color: #7f8c8d;
}
</style>
</head>
<body>
<h1>Heading</h1>
<a href="#">Hover over me!</a>
</body>
</html>
<!-- Viewport Units -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Viewport Units</title>
<style>
.full-screen {
width: 100vw;
height: 100vh;
background-color: #3498db;
}
.half-width {
width: 50vw;
height: 50vh;
background-color: #2ecc71;
}
</style>
</head>
<body>
<div class="full-screen"></div>
<div class="half-width"></div>
</body>
</html>
<!-- Advanced Functions -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Higher-order Functions</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Higher-order Function Example</h1>
<button id="clickMeBtn">Click Me</button>
<script>
// Higher-order function example
function createMultiplier(multiplier) {
return function (num) {
return num * multiplier;
};
}
const multiplyBy2 = createMultiplier(2);
const multiplyBy3 = createMultiplier(3);
document.getElementById("clickMeBtn").addEventListener("click", () => {
alert("5 multiplied by 2 is " + multiplyBy2(5));
alert("5 multiplied by 3 is " + multiplyBy3(5));
});
</script>
</body>
</html>
<!-- Asynchronous JavaScript -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Asynchronous JavaScript</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#data {
font-size: 18px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Asynchronous JavaScript Example</h1>
<button id="loadDataBtn">Load Data</button>
<div id="data"></div>
<script>
document.getElementById("loadDataBtn").addEventListener("click", async () => {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/users");
const data = await response.json();
const user = data[0];
document.getElementById("data").innerHTML = \`<h2>\${user.name}</h2><p>\${user.email}</p>\`;
} catch (error) {
document.getElementById("data").innerHTML = "<p>Error fetching data!</p>";
}
});
</script>
</body>
</html>
<!-- DOM Manipulation -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DOM Manipulation</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>DOM Manipulation Example</h1>
<button id="changeTextBtn">Change Text</button>
<p id="text">This is the original text.</p>
<script>
document.getElementById("changeTextBtn").addEventListener("click", () => {
document.getElementById("text").innerText = "The text has been changed!";
});
</script>
</body>
</html>
<!-- JavaScript Arrays -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Arrays</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
</style>
</head>
<body>
<h1>JavaScript Arrays Example</h1>
<button id="filterBtn">Show Adults</button>
<ul id="list"></ul>
<script>
const people = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 17 },
{ name: "Charlie", age: 30 },
{ name: "David", age: 15 },
];
document.getElementById("filterBtn").addEventListener("click", () => {
const adults = people.filter(person => person.age >= 18);
const list = document.getElementById("list");
list.innerHTML = "";
adults.forEach(person => {
const li = document.createElement("li");
li.textContent = \`\${person.name}, Age: \${person.age}\`;
list.appendChild(li);
});
});
</script>
</body>
</html>
<!-- Objects and OOP -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Object-Oriented JavaScript</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
button {
padding: 10px 20px;
background-color: #17a2b8;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #138496;
}
</style>
</head>
<body>
<h1>Object-Oriented JavaScript Example</h1>
<button id="showCarInfo">Show Car Info</button>
<p id="carInfo"></p>
<script>
class Car {
constructor(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
getCarInfo() {
return \`\${this.year} \${this.make} \${this.model}\`;
}
}
const myCar = new Car("Toyota", "Corolla", 2021);
document.getElementById("showCarInfo").addEventListener("click", () => {
document.getElementById("carInfo").innerText = myCar.getCarInfo();
});
</script>
</body>
</html>
<!-- JavaScript Scope and Hoisting -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Scope and Hoisting</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
</style>
</head>
<body>
<h1>Understanding JavaScript Scope and Hoisting</h1>
<button id="testHoistingBtn">Test Hoisting</button>
<p id="result"></p>
<script>
// Hoisting Example
document.getElementById("testHoistingBtn").addEventListener("click", () => {
try {
hoistedFunction(); // Can be called before definition because of hoisting
var hoistedVar = "This is a hoisted variable!";
document.getElementById("result").innerText = hoistedVar;
} catch (error) {
document.getElementById("result").innerText = error.message;
}
});
function hoistedFunction() {
alert("This function is hoisted!");
}
// Hoisting behavior with 'var' and 'let'
console.log(myVar); // undefined, hoisted with 'var'
var myVar = "This is a var variable.";
// console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
let myLet = "This is a let variable.";
</script>
</body>
</html>
<!-- Error Handling -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Error Handling</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #ff6347;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #e53e3e;
}
#error-message {
margin-top: 20px;
color: red;
}
</style>
</head>
<body>
<h1>JavaScript Error Handling Example</h1>
<button id="causeErrorBtn">Cause an Error</button>
<p id="error-message"></p>
<script>
document.getElementById("causeErrorBtn").addEventListener("click", () => {
try {
// Simulating an error
let result = someFunction(); // This function doesn't exist!
} catch (error) {
document.getElementById("error-message").innerText = \`Error: \${error.message}\`;
}
});
// A function that will be missing to trigger the error
function someFunction() {
throw new Error("This function is undefined!");
}
</script>
</body>
</html>
<!-- JavaScript Modules -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Modules</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
</style>
</head>
<body>
<h1>JavaScript Module Example</h1>
<button id="greetBtn">Say Hello</button>
<script type="module">
// Importing function from another module (greet.js)
import { greet } from './greet.js';
document.getElementById("greetBtn").addEventListener("click", () => {
alert(greet('John'));
});
</script>
</body>
</html>
greet.js file:
<!-- greet.js -->
javascript
// greet.js
export function greet(name) {
return /Hello, /${`name`}!;/}; //use url slash
</script>
<!-- Local Storage and Session Storage -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Local Storage and Session Storage</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Local Storage and Session Storage Example</h1>
<button id="saveBtn">Save to Local Storage</button>
<button id="saveSessionBtn">Save to Session Storage</button>
<button id="getStorageBtn">Get Stored Data</button>
<div id="result"></div>
<script>
document.getElementById("saveBtn").addEventListener("click", () => {
localStorage.setItem("username", "Alice");
});
document.getElementById("saveSessionBtn").addEventListener("click", () => {
sessionStorage.setItem("sessionUser", "Bob");
});
document.getElementById("getStorageBtn").addEventListener("click", () => {
const username = localStorage.getItem("username");
const sessionUser = sessionStorage.getItem("sessionUser");
document.getElementById("result").innerHTML = \`LocalStorage Username: \${username}<br>SessionStorage User: \${sessionUser}\`;
});
</script>
</body>
</html>
<!-- Regular Expressions -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Regular Expressions (RegEx)</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #ff6347;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #e53e3e;
}
</style>
</head>
<body>
<h1>Regular Expressions (RegEx) Example</h1>
<input type="text" id="emailInput" placeholder="Enter email" />
<button id="validateBtn">Validate Email</button>
<p id="message"></p>
<script>
document.getElementById("validateBtn").addEventListener("click", () => {
const email = document.getElementById("emailInput").value;
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (emailPattern.test(email)) {
document.getElementById("message").innerText = "Valid email address!";
} else {
document.getElementById("message").innerText = "Invalid email address.";
}
});
</script>
</body>
</html>
<!-- JavaScript Date and Time -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Date and Time</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#date {
font-size: 1.5rem;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>JavaScript Date and Time Example</h1>
<button id="showDateBtn">Show Current Date and Time</button>
<p id="date"></p>
<script>
document.getElementById("showDateBtn").addEventListener("click", () => {
const currentDate = new Date();
const formattedDate = \`\${currentDate.toLocaleDateString()} \${currentDate.toLocaleTimeString()}\`;
document.getElementById("date").innerText = "Current Date and Time: " + formattedDate;
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Fetch API</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
#data {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>JavaScript Fetch API Example</h1>
<button id="fetchDataBtn">Fetch Data</button>
<div id="data"></div>
<script>
document.getElementById("fetchDataBtn").addEventListener("click", () => {
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => {
document.getElementById("data").innerHTML = \`Title: \${data.title}\n<br>Body: \${data.body}\`;
})
.catch(error => {
document.getElementById("data").innerText = "Error fetching data: " + error.message;
});
});
</script>
</body>
</html>
{`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Closures and Callbacks</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #ff6347;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #e53e3e;
}
#message {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>JavaScript Closures and Callbacks Example</h1>
<button id="greetBtn">Click to Greet</button>
<p id="message"></p>
<script>
function greetingMessage(name) {
return function(message) {
return \`\${message}, \${name}!\`;
}
}
const greet = greetingMessage("Alice");
document.getElementById("greetBtn").addEventListener("click", () => {
const message = greet("Good Morning");
document.getElementById("message").innerText = message;
});
</script>
</body>
</html>`}
{`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Destructuring Assignment</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
#result {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Destructuring Assignment Example</h1>
<button id="showResultBtn">Show Destructured Values</button>
<div id="result"></div>
<script>
const user = { name: "John", age: 30, city: "New York" };
document.getElementById("showResultBtn").addEventListener("click", () => {
const { name, age, city } = user;
document.getElementById("result").innerText = \`Name: \${name}, Age: \${age}, City: \${city}\`;
});
</script>
</body>
</html>`}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Advanced Array Methods</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #c0392b;
}
#result {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Advanced Array Methods Example</h1>
<button id="processArrayBtn">Process Array</button>
<div id="result"></div>
<script>
const numbers = [1, 2, 3, 4, 5];
document.getElementById("processArrayBtn").addEventListener("click", () => {
const squaredNumbers = numbers.map(num => num * num);
const evenNumbers = numbers.filter(num => num % 2 === 0);
const sum = numbers.reduce((total, num) => total + num, 0);
document.getElementById("result").innerHTML = \`
Squared Numbers: \${squaredNumbers.join(", ")}<br>
Even Numbers: \${evenNumbers.join(", ")}<br>
Sum: \${sum}
\`;
});
</script>
</body>
</html>`}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web APIs and DOM Manipulation</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #8e44ad;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #732d91;
}
#message {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Web APIs and DOM Manipulation Example</h1>
<button id="changeColorBtn">Change Background Color</button>
<div id="message"></div>
<script>
document.getElementById("changeColorBtn").addEventListener("click", () => {
document.body.style.backgroundColor = "lightblue";
document.getElementById("message").innerText = "Background color changed!";
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Fetch API</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
#data {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>JavaScript Fetch API Example</h1>
<button id="fetchDataBtn">Fetch Data</button>
<div id="data"></div>
<script>
document.getElementById("fetchDataBtn").addEventListener("click", () => {
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => {
document.getElementById("data").innerHTML = \`Title: \${data.title}\n<br>Body: \${data.body}\`;
})
.catch(error => {
document.getElementById("data").innerText = "Error fetching data: " + error.message;
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Closures and Callbacks</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #ff6347;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #e53e3e;
}
#message {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>JavaScript Closures and Callbacks Example</h1>
<button id="greetBtn">Click to Greet</button>
<p id="message"></p>
<script>
function greetingMessage(name) {
return function(message) {
return \`\${message}, \${name}!\`;
}
}
const greet = greetingMessage("Alice");
document.getElementById("greetBtn").addEventListener("click", () => {
const message = greet("Good Morning");
document.getElementById("message").innerText = message;
});
</script>
</body>
</html>`}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Destructuring Assignment</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
#result {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Destructuring Assignment Example</h1>
<button id="showResultBtn">Show Destructured Values</button>
<div id="result"></div>
<script>
const user = { name: "John", age: 30, city: "New York" };
document.getElementById("showResultBtn").addEventListener("click", () => {
const { name, age, city } = user;
document.getElementById("result").innerText = \`Name: \${name}, Age: \${age}, City: \${city}\`;
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Advanced Array Methods</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #c0392b;
}
#result {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Advanced Array Methods Example</h1>
<button id="processArrayBtn">Process Array</button>
<div id="result"></div>
<script>
const numbers = [1, 2, 3, 4, 5];
document.getElementById("processArrayBtn").addEventListener("click", () => {
const squaredNumbers = numbers.map(num => num * num);
const evenNumbers = numbers.filter(num => num % 2 === 0);
const sum = numbers.reduce((total, num) => total + num, 0);
document.getElementById("result").innerHTML = \`
Squared Numbers: \${squaredNumbers.join(", ")}<br>
Even Numbers: \${evenNumbers.join(", ")}<br>
Sum: \${sum}
\`;
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web APIs and DOM Manipulation</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #8e44ad;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #732d91;
}
#message {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Web APIs and DOM Manipulation Example</h1>
<button id="changeColorBtn">Change Background Color</button>
<div id="message"></div>
<script>
document.getElementById("changeColorBtn").addEventListener("click", () => {
document.body.style.backgroundColor = "lightblue";
document.getElementById("message").innerText = "Background color changed!";
});
</script>
</body>
</html>
Congratulations on reaching this point in your journey of mastering HTML, CSS, and JavaScript! You've learned the core building blocks of web development, and now it's time to keep pushing forward.
By practicing these concepts repeatedly, you're building the foundation for amazing websites and applications. The key is consistent practice and always striving to build real-world projects that test your knowledge and push your boundaries.
Here’s a list of projects you can build to consolidate your learning and improve your skills:
Remember, the path to mastering web development is a marathon, not a sprint. Here’s what you need to keep in mind:
You are now equipped with the foundational knowledge of web development. Keep practicing, build your own projects, and don't give up. The world of web development is vast and full of endless opportunities—your skills will open doors to both personal and professional growth.
The best way to predict your future is to create it yourself. Keep coding, building, and growing, and remember: the more you practice, the closer you get to your goals!
Stay passionate, stay curious, and most importantly—keep building! 🌟
Good luck on your journey! 🚀